<!DOCTYPE html>
<html>

	<head>
		
<title>一个简约扁平化的Hexo静态主题博客-Quiet-Godguns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="/image/logo.ico">


<meta name="keywords" content="Hexo,Quiet,主题,静态主题,">
<meta name="description" content="采用简约大方的扁平化Hexo-Quiet主题">


<script src="/js/jquery.min.js"></script>


	<meta name="generator" content="Hexo 5.4.0"></head>

	<body>
		
<link rel="stylesheet" href="/css/page.css">


<link rel="stylesheet" href="/css/page_cente.css">


<link rel="stylesheet" href="/css/atom-one-dark.css">


<link rel="stylesheet" href="/css/header.css">

	<div class="header">
		<div class="header-top">
			<div class="h-left">
				<a href="/">
					<img src="/image/logo.svg" alt="Quiet">
				</a>
			</div>
			<div class="h-right">
				<ul>
					
						
								<li>
									<a href="/">
										首页
									</a>
									<span class="dot"></span>
								</li>
								
									
						
								<li>
									<a href="/archives">
										时光轴
									</a>
									<span class="dot"></span>
								</li>
								
									
						
								<li>
									<a href="/categories">
										分类
									</a>
									<span class="dot"></span>
								</li>
								
									
						
								<li>
									<a href="/tags">
										标签
									</a>
									<span class="dot"></span>
								</li>
								
									
						
								<li>
									<a href="/links">
										链接
									</a>
									<span class="dot"></span>
								</li>
								
									
						
								<li>
									<a href="/about">
										关于
									</a>
									<span class="dot"></span>
								</li>
								
									
				</ul>
			</div>
			<div class="h-right-close">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
					<path fill="none" d="M0 0h24v24H0z" />
					<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" fill="rgba(68,68,68,1)" />
				</svg>
			</div>
		</div>
	</div>
	<div class="sidebar">
    <div class="topo">
        <h2>Godguns</h2>
    </div>
    <ul>
        
        <li>
            <a href="/">首页</a>
        </li>
        
        <li>
            <a href="/archives">时光轴</a>
        </li>
        
        <li>
            <a href="/categories">分类</a>
        </li>
        
        <li>
            <a href="/tags">标签</a>
        </li>
        
        <li>
            <a href="/links">链接</a>
        </li>
        
        <li>
            <a href="/about">关于</a>
        </li>
        
    </ul>
    <div class="my_foot">
        
        <a target="_blank" rel="noopener" href="https://github.com/qiaobug">
            <img src="https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imggithub.png" alt="Quiet主题">
        </a>
        
    </div>
</div>
<div class='shelter'
    style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: #333;opacity:0.5;z-index: 108;'>
</div>
<style>
    .sidebar {
        width: 0;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 999;
        text-align: center;
        box-shadow: -6px 0 20px rgba(98, 94, 94, .815)
    }

    .topo {
        width: 100%;
        height: 200px;
        background: url(https://api.ixiaowai.cn/gqapi/gqapi.php) no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        align-items: flex-end
    }

    .topo h2 {
        color: #fff;
        z-index: 1;
        position: relative;
        margin: 0 0 10px 10px;
        font-size: 1.2em;
        box-sizing: border-box
    }

    .topo:before {
        content: '';
        background-image: url(/image/pattern.png);
        background-repeat: repeat;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }

    .sidebar ul {
        width: 100%;
        margin-top: 50px
    }

    .sidebar ul li {
        height: 50px;
        list-style: none;
        font-size: 1.2em;
        text-align: right;
        margin-right: 10px
    }

    .sidebar ul li a {
        display: grid;
        color: #5d606a;
        text-overflow: ellipsis;
        width: 100%;
        text-decoration: none
    }

    .my_foot {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        position: absolute;
        bottom: 0
    }

    .my_foot a {
        text-decoration: none;
        margin-right: 10px;
        display: inline-block
    }

    .my_foot a img {
        width: 30px;
        height: 30px
    }
</style>

<script>
    $(function () { $('.h-right-close>svg').click(function () { $('.sidebar').animate({ width: "66%" }, 500); $('.shelter').fadeIn("slow") }); $('.shelter').click(function (e) { $('.sidebar').animate({ width: "0" }, 500); $('.shelter').fadeOut("slow") }) })
</script>
		<script>
			$(function () { $(window).scroll(function () { if ($(document).scrollTop() > 100) { $(".header-top").removeClass("header-move2"); $('.header-top').addClass('header-move1') } else { $(".header-top").removeClass("header-move1"); $('.header-top').addClass('header-move2') } }) });
		</script>
<div class="header-bg bg-content-img">
    <div class="bg-content">
        <ul class="tag">
            
            
            <li><a href="/tags/Hexo">Hexo</a></li>
            
            <li><a href="/tags/Quiet">Quiet</a></li>
            
            <li><a href="/tags/主题">主题</a></li>
            
            <li><a href="/tags/静态主题">静态主题</a></li>
            
            
        </ul>
        <h1>一个简约扁平化的Hexo静态主题博客-Quiet</h1>
        <div class="article-info">
            <div class="article-author">
                
                <svg t="1604839279282" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2901" width="20" height="20">
                    <path
                        d="M513 956.3c-247.7 0-448-200.3-448-448S265.3 66.2 513 66.2s448 200.3 448 448-200.3 442.1-448 442.1z m0-830.9c-212.2 0-388.8 170.7-388.8 388.8C124.2 726.3 294.9 903 513 903c212.2 0 388.8-170.7 388.8-388.8S725.2 125.4 513 125.4z m0 430.2c-94.2 0-170.7-76.5-170.7-170.7S418.8 207.8 513 207.8s170.7 76.5 170.7 170.7S607.2 555.6 513 555.6z m0-289.1c-64.6 0-112 52.8-112 112s47.4 117.9 112 117.9 112-52.8 112-112-47.4-117.9-112-117.9z m0 689.8c-135.7 0-259-58.7-341.9-158.9l-11.8-17.8 11.8-17.8c76.5-117.9 206.2-188.5 347.8-188.5 135.7 0 265 64.6 341.9 182.6l11.8 17.8-11.8 17.8C778 897.1 648.7 956.3 513 956.3zM230.3 773.2C300.9 849.7 406.9 897 513 897c112 0 218.1-47.4 288.6-129.8-70.5-88.2-170.7-135.6-282.7-135.6s-218.1 53.3-288.6 141.6z"
                        p-id="2902" fill="#ffffff"></path>
                </svg>
                
                <span> <a href="">Godguns</a></span>
                <p>2020-11-03 20:33:36</p>
            </div>
        </div>
    </div>
</div>
<div class="article-content">
    <div id="article" class="content">
        <h3 id="要理解computed-的工作原理-，只需要理解下面三个问题"><a href="#要理解computed-的工作原理-，只需要理解下面三个问题" class="headerlink" title="要理解computed 的工作原理 ，只需要理解下面三个问题"></a>要理解computed 的工作原理 ，只需要理解下面三个问题</h3><blockquote>
<p>1.computed 也是响应式的   </p>
<p>2.computed如何控制缓存   </p>
<p>3.依赖的data改变了，computed如何更新      </p>
</blockquote>
<h4 id="computed也是响应式的"><a href="#computed也是响应式的" class="headerlink" title="computed也是响应式的"></a>computed也是响应式的</h4><p>给computed设置的get和set函数，会跟Object.defineProperty关联起来。所以Vue能捕捉到读取computed和赋值computed 的操作<br>读取computed时，会执行你设置的get函数，但是并没有这么简单，因为还有一层缓存的操作赋值computed的操作<br>赋值computed时，会执行你设置的set函数，这个就比较简单，会直接把set赋值给object.defineproperty-set</p>
<h4 id="computed-如何控制缓存"><a href="#computed-如何控制缓存" class="headerlink" title="computed 如何控制缓存"></a>computed 如何控制缓存</h4><blockquote>
<p>question:我们为什么需要缓存呢？，假如我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算，然后我们可能有其他的计算属性依赖于A，如果没有缓存，我们每需要一次A就需要多次A的getter   </p>
</blockquote>
<p>那么computed是如何判断是否使用缓存的？<br>computed就算后，会把计算得到的值保存在一个变量中，读取computed的时候便直接返回这个变量<br>computed控制缓存的重要一点是–【脏数据标志位dirty】，dirty是watcher的一个属性，当dirty为true的时候，读取computed会重新计算，当dirty为false，读取computed会使用缓存</p>
<h4 id="支持在html中使用md语法"><a href="#支持在html中使用md语法" class="headerlink" title="支持在html中使用md语法"></a>支持在html中使用md语法</h4><table>
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody><tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
</tbody></table>

    </div>
</div>
<style>
    #noneimg img {
        display: none;
        z-index: 109;
        width: 600px !important;
        border-radius: 0px;
        position: fixed;
        box-shadow: 0 0 0px #c3c3c300 !important;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto !important;
    }

    @media screen and (max-width:600px) {
        #noneimg img {
            width: 88%
        }
    }
</style>
<script>
    $(function () { $('#article').click(function (e) { if (e.target.tagName == "IMG") { if ($('#nonediv').length == 0) { let MImg = `<div id='noneimg'><img src='${e.target.currentSrc}'></div>`; let MDiv = "<div id='nonediv' style='cursor: pointer;display: none; position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: #333;opacity:0.5;z-index: 108;'></div>"; $('#article').append(MDiv); $('#article').append(MImg); $("#nonediv").fadeIn("slow"); $("#noneimg img").fadeIn("slow") } } else { if ($('#nonediv').length !== 0) { $("#noneimg ").fadeOut("slow"); $("#nonediv").fadeOut("slow"); setTimeout(function () { $('#nonediv').remove(); $('#noneimg').remove() }, 500) } } }); $('.article-content').addClass('content-move') });
</script>
<div class="Last-Next">
    

    
    <a href="/2020/11/03/hello-world%E7%9A%84%E5%89%AF%E6%9C%AC/">
        <div class="next">
            <span>下一篇</span>
            <p>vue3的新知识</p>
        </div>
    </a>
    
</div>
		
<link rel="stylesheet" href="/css/food.css">

<div class="footer">
	<div class="Copyright">
		©2021 By Godguns. 主题：<a
			style="text-decoration: none;display: contents; color: #898F9F;"
			target="_blank" rel="noopener" href="https://github.com/qiaobug/hexo-theme-quiet">Quiet</a>
	</div>
	<div class="contact">
		
		<a target="_blank" rel="noopener" href="https://github.com/qiaobug">
			<img src="https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imggithub.png" alt="Quiet主题">
		</a>
		
	</div>
</div>

<script src="/js/jquery.min.js"></script>


<script src="/js/gotop.js"></script>


<style type="text/css">
    @media screen and (min-width: 600px) {
        .goTop>span {
            display: block;
            border-radius: 50%;
            width: 66px;
            height: 66px;
            cursor: pointer;
            opacity: 0.8;
            background: rgba(18, 24, 58, 0.06);
            text-align: center;
            border: 1px solid rgba(18, 24, 58, 0.06);

            transition: border .5s;
            -moz-transition: border .5s;
            /* Firefox 4 */
            -webkit-transition: border .5s;
            /* Safari 和 Chrome */
            -o-transition: border .5s;
            /* Opera */
        }

        .goTop>span:hover {
            border: 1px solid #6680B3;
        }


        .goTop {
            position: fixed;
            right: 30px;
            bottom: 80px;
        }

        .goTop>span>svg {
            width: 30px;
            height: 30px;
            margin-top: 17.5px;
            opacity: 0.7;
        }

    }

    @media screen and (max-width: 600px) {
        .goTop {
            display: none;
        }
    }
</style>
<div class="goTop" id="js-go_top">
    <span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <g>
                <path d="M13 12v8h-2v-8H4l8-8 8 8z"></path>
            </g>
        </svg>
    </span>
</div>
<script>
    $('#js-go_top').gotoTop({ offset: 500, speed: 300, animationShow: { 'transform': 'translate(0,0)', 'transition': 'transform .5s ease-in-out' }, animationHide: { 'transform': 'translate(100px,0)', 'transition': 'transform .5s ease-in-out' } });
</script>
<script>
	console.log('\n %c Hexo-Quiet 主题 %c https://github.com/QiaoBug/hexo-theme-quiet \n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;')
</script>
	</body>

</html>